<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<script src="../../js/vue.js"></script>
<body>
<div id="root">
    <h2>欢迎回来{{name}}</h2>
    <!--    常用的两个键盘事件:@keydown,@keyup-->
    <label><input @keyup="showInfo" type="text" placeholder="按下回车提示输入"></label>
    <!--    @keyup.enter用.enter属性代表回车   .caps-lock:使用kebab-case绑定vue未命名的键值 -->
    <label><input @keyup.enter.caps-lock="showInfo2" type="text" placeholder="按下回车提示输入2"></label>
    <!--    系统修饰键-->
    <label><input @keyup.ctrl="showInfo2" type="text" placeholder="按下回车提示输入(系统修饰键)"></label>

</div>
<script>
    new Vue({
        el: '#root',
        data: {
            name: '曾宇杰',
        },
        methods: {
            showInfo(e) {
                //e.keyCode拿到触发这个事件时键盘最后输入的键盘码
                console.log(e.key, e.keyCode)
                if (e.keyCode === 13) {
                    // 输入框触发的键盘对象,拿到输入框中的value
                    alert('你输入的值为:' + e.target.value)
                }
            },
            showInfo2(e) {
                //e.keyCode拿到触发这个事件时键盘最后输入的值是什么
                // 输入框触发的键盘对象,拿到输入框中的value
                alert('你输入的值为:' + e.target.value)
            }
        }
    })

    /**
     * 1.vue中常用的按键别名:
     *  回车=>enter
     *  删除=>delete
     *  退出=>esc
     *  空格=>space
     *  换行=>tab
     *  上=>up
     *  下=>down
     *  左=>left
     *  右=>right
     *
     *  2.vue中未提供别名的案件,可以使用键盘原始值key值去绑定,但注意需要转为kebab-case(全小写短横线分割命名)
     *
     *  3.系统修饰键(用法特殊):ctrl,alt,shift,meta
     *      配合keyup使用:按下修饰键的同时再按其他键,随后释放后触发事件
     *      配合keydown使用:正常触发事件
     *      当使用系统修饰键的时候,我们可以指定系统修饰键+所需配合的按键来触发事件    比如说:@keyup.ctrl.y   只有当ctrl配合y才能触发该事件
     *
     *  4.也可以使用KeyCode去指定具体的按键(不推荐)
     *
     *  5.Vue.config.keyCodes.自定义键名=键码. 可以去定制按键别名
     *
     *  特殊按键:tab    会切换焦点,要配合keydown使用
     */
</script>
</body>
</html>